<template>
    <el-container class="spider-rule-container" direction="vertical" style="margin-right: 20px;">
        <el-container class="source-platform">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">目标平台</span></label>
            <el-select v-model="form.platformId" @change="handlePlatformChanged" placeholder="请选择">
                <el-option v-for="item in platformOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-container>
        <el-container class="source-type">
            <label role="radio" class="el-radio label-item"><span class="el-radio__label label-text">模块名称</span></label>
            <el-select v-model="form.moduleId" :loading="loading" placeholder="请选择">
                <el-option v-for="item in moduleOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
        </el-container>
        <VueJsonEditor ref="codeRule" :json="rule.codeRule" class="code-rule" />
        <el-button type="primary" @click="handleSave" size="mini">保存</el-button>
    </el-container>
</template>

<style lang="scss">
.spider-rule-container {
    .source-platform {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .label-item {
        display: flex !important;
        align-items: center;
        margin-right: 15px !important;
    }

    .label-text {
        font-weight: bold;
        padding-left: 0px !important;
    }

    .label-text::after {
        content: " :";
    }

    .code-rule {
        flex: 1;
        margin-bottom: 20px;
    }

    .source-type {
        margin-bottom: 20px;
    }

    .el-select {
        width: 126px;
    }
}
</style>

<script>

import { DictDao } from "@/dao/dictDao"
import { RuleDao } from "@/dao/ruleDao"
import { DeepCopy } from "@/utils/Utils"
import { DictType, UsageScope } from "@/entities/Constant"

import VueJsonEditor from "@/components/Common/VueJsonEditor"

export default {
    name: "SpiderRule",
    components: {
        VueJsonEditor
    },
    props: {
        rule: {
            type: Object,
            default: () => {
                return RuleDao.initialForm()
            },
        },
        usageScope:{
            type: Number,
            default: UsageScope.Spider,
        },
        dictType: {
            type: Number,
            default: DictType.Platform
        }
    },
    data() {
        return {
            form: DeepCopy(this.rule),
            loading: false,
            moduleOptions: [],
            platformOptions: [],
        }
    },
    mounted() {
        this.init().then(() => {
            this.$nextTick(() => {
                this.form = DeepCopy(this.rule)
            })
        })
    },
    methods: {
        async init() {
            this.platformOptions = await DictDao.Platforms(this.dictType, this.usageScope)
            if (this.rule.platformId) {
                this.moduleOptions = await this.getModules(this.rule.platformId)
            }
        },
        async getModules(platformId) {
            return await DictDao.Platforms(DictType.JsModule, this.usageScope, platformId)
        },
        getModule(moduleId) {
            return this.moduleOptions.find(item => item.id == moduleId)
        },
        handlePlatformChanged(platformId) {
            this.loading = true
            this.getModules(platformId).then(res => {
                this.loading = false
                this.moduleOptions = res
            })
        },
        handleSave() {
            let formData = DeepCopy(this.form)
            let module = this.getModule(formData.moduleId)
            formData.name = module.name
            formData.type = this.dictType
            formData.module = module.data
            formData.usageScope = this.usageScope
            formData.sourceType = module.sourceType
            formData.codeRule = JSON.stringify(this.$refs.codeRule.jsonData)
            RuleDao.save(formData).then(res => {
                console.log("ruleDao",res)
                if (res > 0) {
                    this.$message.success("成功了")
                } else {
                    this.$message.error("失败了")
                }
                this.$emit("save", res)
            })
        },
    },
    watch: {
        rule(newRule, oldRule) {
            this.form = DeepCopy(newRule)
        }
    }
}

</script>